//在Echarts.vue文件中
<template>
  <div class="Echarts">
    <div
     :id="boxId"
     :style="{ width: '400px', height: '300px' }"
></div>
  </div>
</template>

<script>
export default {
  name: 'Echarts-Index',
  mounted () {
    // 挂载后调用创建水球图函数
    this.createWater()
  },
  data () {
    return {
      // 动态id，确保封装成组件后每个组件不受影响
      boxId: 'Waterbox' + new Date().getTime()
    }
  },
  methods: {
    // 方法
    createWater () {
      const myChart = this.$echarts.init(document.getElementById(`${this.boxId}`))
      const option = {
        title: {
          text: '水球图',
          left: this.WaterData.Left,
          top: 10,
          textStyle: {
            color: '#333',
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        series: [
          {
            name: 'water echart',
            type: 'liquidFill',
            radius: '200px',
            data: [0.6],
            // 水球图中的水位，0-1之间，若想要多个波纹，可写多条数据[0.6, 0.5, 0.8]，
            // 如果想要不显示，可以设置label中的textStyle.fontSize为 0
            label: {
              normal: {
                color: '#27e5f1',
                insideColor: '#fff',
                textStyle: {
                  fontSize: 40, // 此处设置为0时文字消失
                  fontWeight: 'bold'
                }
              }
            },
            color: [
              {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ['#6a7feb'] // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: ['#27e5f1'] // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            ],
            outline: {
              show: true,
              borderDistance: 5,
              itemStyle: {
                borderColor: '#27e5f1', // 水球图外边框的颜色
                borderWidth: 3 // 水球图外边框的宽度
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style>

</style>
